<% var typeDisplay = {
    'job': 'job',
    'dockerimage': 'docker',
    'script': 'script',
    'data': 'data',
}[type] || 'job', urlPrefix = '?index=' + this.pluginIndex; %>
<div class="container-fluid" id="info">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <section class="content" style="min-height: auto;">
                <div class="row">
                    <div class="col-md-6">
                        <p class="lead">
                            <a href="<%= urlPrefix %>">Marketplace</a> / <span class="text-capitalize"><%= typeDisplay %></span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <form class="input-group input-group-sm pull-right">
                            <input type="hidden" name="index" value="<%= this.pluginIndex %>">
                            <input type="search" class="form-control" name="query"
                                placeholder="Search job, docker script, and data on Platform for AI">
                            <span class="input-group-btn">
                                <button class="btn btn-info" type="submit" aria-label="Search">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                </button>
                            </span>
                        </form>
                    </div>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img class="media-object" src="/assets/img/marketplace/detail/<%= typeDisplay %>.png" alt="<%= name %>" height="100">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading"><%= name %></h4>
                        <p><strong><%= contributor %></strong></p>
                        <p><%= description %></p>
                        <div class="row">
                            <div class="col-md-2 col-sm-4 col-xs-6">
                                <a href="submit-v2.html?op=use&type=<%= encodeURIComponent(type) %>&name=<%= encodeURIComponent(name) %>" class="btn btn-info btn-block">Use</a>
                            </div>
                            <!-- <% if (type === 'job') { %>
                            <div class="col-md-2 col-sm-4 col-xs-6">
                                <a href="submit-v2.html?op=run&type=<%= encodeURIComponent(type) %>&name=<%= encodeURIComponent(name) %>" class="btn btn-info btn-block">Run</a>
                            </div>
                            <% } %> -->
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<div class="container-fluid" id="description">
    <div class="row">
        <div class="col-md-11 col-md-offset-1">
            <section class="content">
                <h4><strong><%= typeDisplay === 'job' ? 'Jobs ' : '' %>Description</strong></h4>
                <% if (typeDisplay === 'job') { %>
                    <div class="row">
                    <% for(var i = 0, l = prerequisites.length; i < l; i += 1) { var item = prerequisites[i]
                        var subTypeDisplay = {
                            'job': 'job',
                            'dockerimage': 'docker',
                            'script': 'script',
                            'data': 'data',
                        }[item.type] || 'job'; %>
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <a href="<%= urlPrefix %>&type=<%= encodeURIComponent(subTypeDisplay) %>&name=<%= encodeURIComponent(item.name) %>"
                                class="thumbnail">
                                <img src="/assets/img/marketplace/<%= subTypeDisplay %>.jpg" width="50%">
                                <div class="caption">
                                    <h3 class="h5 text-center single-line"><strong><%= item.name %></strong></h3>
                                    <p class="text-muted single-line">
                                        <span><%= item.contributor %></span>
                                    </p>
                                    <p class="single-line"><%= item.description %></p>
                                </div>
                            </a>
                        </div>
                    <% } %>
                    </div>
                <% } %>
                <hr>
                <div>
                    <p><%= description %></p>
                </div>
                <div>
                    <% if (type === 'job') {
                        for (var i = 0, l = prerequisites.length; i < l; i++) {
                            var uri = prerequisites[i].uri
                            var compiledUri = this.compileUri(uri)
                            %>
                        <p class="single-line"><a href="<%= compiledUri %>"><%= compiledUri %></a></p>
                        <% }
                    } else { 
                        var compiledUri = this.compileUri(uri) %>
                        <p class="single-line"><a href="<%= compiledUri %>"><%= compiledUri %></a></p>
                    <% } %>
                </div>
            </section>
        </div>
    </div>
</div>
